<template>
	<view class="content">
		<u-tabs :list="tablist" active-color="#5290ff" inactive-color="#606266" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
		
		<view v-show="current === 0" v-for="(item,index) in waitingOrder" :key="item.workOrderId">
		<u-card >
			<view slot="head">
				<view class="card__head">
					<view class="card__head__left">{{item.workOrderId}}</view>
					<view class="card__head__right">{{item.startDate}}</view>
				</view>
			</view>
			<view slot="body">
				<view class="body__top">
					<view>店铺号:{{item.storeId}}</view>
					<view class="body__top__right">店铺联系人:{{item.storeConnUserName + "/" + item.storeConnPhone}}</view>
				</view>
				<view class="body__bottom">
					<view class="body__bottom__left">
						<view>店铺地址:{{item.storeAddress}}</view>
						<view>工单备注:{{item.workOrderRemark == null ? "" : item.workOrderRemark.remark}}</view>
						<view v-if="item.workOrderTypeId === 1">故障描述:{{item.faultDescribe == null ? "" : item.faultDescribe}}</view>
					</view>
					<view class="body__bottom__right">
						<button class="card__button button__trans" @click="getCurrentWorkOrderInfo(item.workOrderId,item.workOrderTypeId,item.workOrderStatus)">转单</button>
						<button class="card__button button__pick" @click="takeOrder(item.workOrderId,item.workOrderTypeId,item)">接单</button>
					</view>
				</view>
			</view>
		</u-card>
		</view>
		<view v-show="current === 1" v-for="(item,index) in inProgressOrder" :key="item.workOrderId">
		<u-card  @click="cardClick(item)">
			<view slot="head">
				<view class="card2__head">
					<view class="card__head__left">{{item.workOrderId}}</view>
					<view class="card2__head__right">{{item.startDate}}</view>
					<span class="card2__head__icon iconfont" v-if="Number(item.workOrderStatus) !== 5">{{Number(item.workOrderStatus) === 10 ? "转" : Number(item.workOrderStatus) === 20 ? "审" : Number(item.workOrderStatus) === 16 ? "驳" : !!item.alreadyOverTime ? "超" : ""}}</span>
				</view>
			</view>
			<view slot="body">
				<view class="body__top">
					<view class="storeId">店铺号:{{item.storeId}}</view>
					<view class="body__top__right">店铺联系人:{{item.storeConnUserName + "/" + item.storeConnPhone}}</view>
				</view>
				<view class="body__bottom">
					<view class="body__bottom__left">
						<view>店铺地址:{{item.storeAddress}}</view>
						<view>工单备注:{{item.workOrderRemark == null ? "" : item.workOrderRemark.remark}}</view>
						<view v-if="item.workOrderTypeId === 1">故障描述:{{item.faultDescribe == null ? "" : item.faultDescribe}}</view>
					</view>
					<view class="body__bottom__right" v-if="item.workOrderStatus === 5 && item.arriveTime == null">
						<button class="card__button button__pick button__arrival" @click.stop="jumpToDetails(item.workOrderId,item.workOrderTypeId,item)">到场</button>
					</view>
				</view>
			</view>
		</u-card>
		</view>
		<view v-show="current === 2" v-for="(item,index) in finialOrder" :key="item.workOrderId">
		<u-card @click="cardClick(item)">
			<view slot="head">
				<view class="card__head">
					<view class="card__head__left">{{item.workOrderId}}</view>
					<view class="card__head__right">{{item.startDate}}</view>
				</view>
			</view>
			<view slot="body">
				<view class="body__top">
					<view>店铺号:{{item.storeId}}</view>
					<view class="body__top__right">店铺联系人:{{item.storeConnUserName + "/" + item.storeConnPhone}}</view>
				</view>
				<view class="body__bottom">
					<view class="body__bottom__left">
						<view>店铺地址:{{item.storeAddress}}</view>
						<view>工单备注:{{item.workOrderRemark == null ? "" : item.workOrderRemark.remark}}</view>
						<view v-if="item.workOrderTypeId === 1">故障描述:{{item.faultDescribe == null ? "" : item.faultDescribe}}</view>
					</view>
					<view class="body__bottom__right">
					</view>
				</view>
			</view>
		</u-card>
		</view>
		<view v-show="current === 3" v-for="(item,index) in alreadyOverTimeOrder" :key="item.workOrderId">
				<u-card @click="cardClick(item)">
					<view slot="head">
						<view class="card2__head">
							<view class="card__head__left">{{item.workOrderId}}</view>
							<view class="card2__head__right">{{item.startDate}}</view>
							 <span class="card2__head__icon">超</span>
						</view>
					</view>
					<view slot="body">
						<view class="body__top">
							<view>店铺号:{{item.storeId}}</view>
							<view class="body__top__right">店铺联系人:{{item.storeConnUserName + "/" + item.storeConnPhone}}</view>
						</view>
						<view class="body__bottom">
							<view class="body__bottom__left">
								<view>店铺地址:{{item.storeAddress}}</view>
								<view>工单备注:{{item.workOrderRemark == null ? "" : item.workOrderRemark.remark}}</view>
								<view v-if="item.workOrderTypeId === 1">故障描述:{{item.faultDescribe == null ? "" : item.faultDescribe}}</view>
							</view>
							<view class="body__bottom__right">
							</view>
						</view>
					</view>
				</u-card>
		</view>
		<view v-show="current === 4" v-for="(item,index) in alreadyTransferOrder" :key="item.workOrderId">
		<u-card>
			<view slot="head">
				<view class="card__head">
					<view class="card__head__left">{{item.workOrderId}}</view>
					<view class="card__head__right">{{item.startDate}}</view>
				</view>
			</view>
			<view slot="body">
				<view class="body__top">
					<view>店铺号:{{item.storeId}}</view>
					<view class="body__top__right">店铺联系人:{{item.storeConnUserName + "/" + item.storeConnPhone}}</view>
				</view>
				<view class="body__bottom">
					<view class="body__bottom__left">
						<view>店铺地址:{{item.storeAddress}}</view>
						<view>工单备注:{{item.workOrderRemark == null ? "" : item.workOrderRemark.remark}}</view>
						<view v-if="item.workOrderTypeId === 1">故障描述:{{item.faultDescribe == null ? "" : item.faultDescribe}}</view>
					</view>
					<view class="body__bottom__right">
					</view>
				</view>
			</view>
		</u-card>
		</view>
		<view v-show="current === 5" v-for="(item,index) in bugOrder" :key="item.workOrderId">
		<u-card>
			<view slot="head">
				<view class="card__head">
					<view class="card__head__left">{{item.workOrderId}}</view>
					<view class="card__head__right">{{item.startDate}}</view>
				</view>
			</view>
			<view slot="body">
				<view class="body__top">
					<view>店铺号:{{item.storeId}}</view>
					<view class="body__top__right">店铺联系人:{{item.storeConnUserName + "/" + item.storeConnPhone}}</view>
				</view>
				<view class="body__bottom">
					<view class="body__bottom__left">
						<view>店铺地址:{{item.storeAddress}}</view>
						<view>工单备注:{{item.workOrderRemark == null ? "" : item.workOrderRemark.remark}}</view>
						<view v-if="item.workOrderTypeId === 1">故障描述:{{item.faultDescribe == null ? "" : item.faultDescribe}}</view>
					</view>
					<view class="body__bottom__right">
					</view>
				</view>
			</view>
		</u-card>
		</view>
		<uni-popup :show="modalShow" type="center" :custom="true" :mask-click="false">
						            <view class="uni-tip">
						                <!-- 标题 -->
						                <view class="uni-tip-title">转单原因</view>
						                <view class="uni-tip-content">
						                    <!-- 中间内容进行自定义 -->
						                     <input class="uni-tip-content-input" focus="true" placeholder="请输入转单原因"  v-model="tansferReason" />
						                </view>
						                <!-- 按钮部分 -->
						                <view class="uni-tip-group-button">
											<button type="primary" plain="true" @click="confirm">确定</button>
											<!-- <button type="warn" plain="true" @click="refuse">取消</button>
						                    <button type="primary" @click="query">确定</button> -->
						                    <button type="warn" @click="cancel">取消</button>
						                </view>
						            </view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/modal.vue";
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				orderType:null,
				modalShow:false,
				waitingOrder:[],
				inProgressOrder:[],
				finialOrder:[],
				alreadyTransferOrder:[],
				alreadyOverTimeOrder:[],
				bugOrder:[],
				currentWorkId:"",
				currentTypeId:0,
				currentWorkOrderStatus:0,
				tablist:[
					{
						name: '待接单'
					},
					{
						name: '进行中'
					},
					{
						name: '已完成'
					}, 
					{
						name: '已超时'
					},
					{
						name: '转单'
					},
					{
						name: '异常'
					},
				],
				current: 0,
				tansferReason:""
			}
		},
		methods: {
			change(index) {
				this.current = index;
				getApp().globalData.target = index;
			},
			cardClick(item){
				// lv 工单 or ad 工单
				let orderType = item.workOrderId.charAt(2) === "l" ? "lv" : "ad";
				if(item.workOrderStatus === 5 || item.workOrderStatus === 16 || item.workOrderStatus === 100 || item.workOrderStatus === 20){
					uni.navigateTo({
						url:`./orderDetails?workOrderId=${item.workOrderId}&typeId=${item.workOrderTypeId}&workOrderStatus=${item.workOrderStatus}&orderType=${orderType}`
					});
				}
			},
			jumpToDetails(workOrderId,typeId,item) {
				let orderType = item.workOrderId.charAt(2) === "l" ? "lv" : "ad";
				let data;
				if(Number(typeId) === 0){
					data = orderType === "ad" ? {
						updateAdOpenWorkOrderBo: {
							arriveTime: this.transformTime(Date.now()),
						    workOrderId: workOrderId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					} : {
						updateLvOpenWorkOrderBo: {
							arriveTime: this.transformTime(Date.now()),
						    workOrderId: workOrderId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					};
				}else if(Number(typeId) === 2){
					data = orderType === "ad" ? {
						updateAdCloseWorkOrderBo: {
							arriveTime: this.transformTime(Date.now()),
						    workOrderId: workOrderId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					} : {
						updateLvCloseWorkOrderBo: {
							arriveTime: this.transformTime(Date.now()),
						    workOrderId: workOrderId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					};
				}else if(Number(typeId) === 1){
					data = orderType === "ad" ? {
						updateAdMaWorkOrderBo: {
							arriveTime: this.transformTime(Date.now()),
						    workOrderId: workOrderId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					} : {
						updateLvMaWorkOrderBo: {
							arriveTime: this.transformTime(Date.now()),
						    workOrderId: workOrderId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					}
				}
				const requestUrl = orderType === "ad" ? "/system/ad-workOrder" : "/system/lv-workOrder";
				this._put(requestUrl,data,(res) => {
					if(res.code === 500) {
						uni.showToast({
							title:'服务器出错',
							icon:'error'
						});
					}else if(res.code === 200) {
						uni.showToast({
						title: '到场成功',
						icon:'success'
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:`./orderDetails?workOrderId=${workOrderId}&typeId=${typeId}&workOrderStatus=${item.workOrderStatus}&orderType=${orderType}`
						});
					},1000)
					}
				})
			},
			getCurrentWorkOrderInfo(id,typeId,workOrderStatus){
				this.currentOrderType = id.charAt(2) === "l" ? "lv" : "ad";
				this.currentWorkId = id;
				this.currentTypeId = typeId;
				this.currentWorkOrderStatus = workOrderStatus;
				this.modalShow = true;
			},
			takeOrder(id,typeId,item){
				let orderType = item.workOrderId.charAt(2) === "l" ? "lv" : "ad";
				this.currentWorkId = id;
				let data;
				if(Number(typeId) === 0){
					data = orderType === "ad" ? {
						updateAdOpenWorkOrderBo: {
							pickOrderTime: this.transformTime(Date.now()),
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					} : {
						updateLvOpenWorkOrderBo: {
							pickOrderTime: this.transformTime(Date.now()),
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					};
				}else if(Number(typeId) === 2){
					data = orderType === "ad" ? {
						updateAdCloseWorkOrderBo: {
							pickOrderTime: this.transformTime(Date.now()),
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					} : {
						updateLvCloseWorkOrderBo: {
							pickOrderTime: this.transformTime(Date.now()),
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					};
				}else if(Number(typeId) === 1){
					data = orderType === "ad" ? {
						updateAdMaWorkOrderBo: {
							pickOrderTime: this.transformTime(Date.now()),
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					} : {
						updateLvMaWorkOrderBo: {
							pickOrderTime: this.transformTime(Date.now()),
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 5,
						    workOrderTypeId: typeId
						}
					}
				}
				const requestUrl = orderType === "ad" ? "/system/ad-workOrder" : "/system/lv-workOrder";
				this._put(requestUrl,data,(res) => {
					if(res.code === 500) {
						uni.showToast({
							title:'服务器出错',
							icon:'error'
						});
					}else if(res.code === 200) {
						uni.showToast({
						title:'接单成功',
						icon:'success'
					});
					}
				});
				setTimeout(() => {this.fetchData()},1000);
			},
			cancel(){
				this.modalShow = false;
			},
			confirm(){
				let data;
				if(Number(this.currentTypeId) === 0){
					data = this.currentOrderType === "ad" ? {
						updateAdOpenWorkOrderBo: {
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 10,
						    workOrderTypeId: this.currentTypeId
						},
						workOrderRemarkBo:{
							remark: this.tansferReason,
							remarkType: 5,
							workOrderId: this.currentWorkId
						}
					} : {
						updateLvOpenWorkOrderBo: {
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 10,
						    workOrderTypeId: this.currentTypeId
						},
						workOrderRemarkBo:{
							remark: this.tansferReason,
							remarkType: 5,
							workOrderId: this.currentWorkId
						}
					};
				}else if(Number(this.currentTypeId) === 2){
					data = this.currentOrderType === "ad" ? {
						updateAdCloseWorkOrderBo: {
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 10,
						    workOrderTypeId: this.currentTypeId
						},
						workOrderRemarkBo:{
							remark: this.tansferReason,
							remarkType: 5,
							workOrderId: this.currentWorkId
						}
					} : {
						updateLvCloseWorkOrderBo: {
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 10,
						    workOrderTypeId: this.currentTypeId
						},
						workOrderRemarkBo:{
							remark: this.tansferReason,
							remarkType: 5,
							workOrderId: this.currentWorkId
						}
					};
				}else if(Number(this.currentTypeId) === 1){
					data = this.currentOrderType === "ad" ? {
						updateAdMaWorkOrderBo: {
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 10,
						    workOrderTypeId: this.currentTypeId
						},
						workOrderRemarkBo:{
							remark: this.tansferReason,
							remarkType: 5,
							workOrderId: this.currentWorkId
						}
					} : {
						updateLvMaWorkOrderBo: {
						    workOrderId: this.currentWorkId,
						    workOrderStatus: 10,
						    workOrderTypeId: this.currentTypeId
						},
						workOrderRemarkBo:{
							remark: this.tansferReason,
							remarkType: 5,
							workOrderId: this.currentWorkId
						}
					};
				}
				const requestUrl = this.currentOrderType === "ad" ? "/system/ad-workOrder" : "/system/lv-workOrder";
				this._put(requestUrl,data,(res) => {
					if(res.code === 500) {
						uni.showToast({
							title:'服务器出错',
							icon:'error'
						});
					}else if(res.code === 200) {
						uni.showToast({
						title:res.msg,
						icon:'success'
					});
					}
				})
				this.modalShow = false;
				setTimeout(() => {this.fetchData()},1000);
			},
			fetchData(){
				this.waitingOrder = [];
				this.inProgressOrder = [];
				this.finialOrder = [];
				this.bugOrder = [];
				this.alreadyOverTimeOrder = [];
				this.alreadyTransferOrder = [];
				var that = this;
				const userid = uni.getStorageSync("userid");
				if(!this.orderType || this.orderType === "ad"){
					this._get("/system/ad-workOrder/list",{
					supplierUserId:userid
				},(res) => {
					if(res.rows){
							res.rows.forEach((item) => {
								if(item.alreadyOverTime){
									that.alreadyOverTimeOrder.push(item);
								}
							that._get(`/system/ad-store/${item.storeId}`,{},(res)=>{
								let storeConnPhone = res.data.storeConnPhone == null ? "" : res.data.storeConnPhone;
								let storeAddress = res.data.storeAddress == null ? "" : res.data.storeAddress;
								let storeConnUserName = res.data.storeConnUserName == null ? "" : res.data.storeConnUserName;
								item.storeConnPhone = storeConnPhone;
								item.storeAddress = storeAddress;
								item.storeConnUserName = storeConnUserName;
								switch(Number(item.workOrderStatus)){
									case 0:
										that.waitingOrder.push(item);
										break;
									case 5:
										that.inProgressOrder.push(item);
										break;
									case 10:
										that.inProgressOrder.push(item);
										break;
									case 20:
										that.inProgressOrder.push(item);
										break;
									case 16:
										that.inProgressOrder.push(item);
										break;
									case 100:
										that.finialOrder.push(item);
										break;
									case 15:
										that.alreadyTransferOrder.push(item);
										break;
									case -1:
										that.bugOrder.push(item);
										break;
								}
							})
						})
					}
					
				});
				}
				if(!this.orderType || this.orderType === "lv"){
					this._get("/system/lv-workOrder/list",{
					supplierUserId:userid
				},(res) => {
					if(res.rows){
							res.rows.forEach((item) => {
								if(item.alreadyOverTime){
									that.alreadyOverTimeOrder.push(item);
								}
							that._get(`/system/lv-store/${item.storePrimaryId}`,{},(res)=>{
								let storeConnPhone = res.data.storeConnPhone == null ? "" : res.data.storeConnPhone;
								let storeAddress = res.data.storeAddress == null ? "" : res.data.storeAddress;
								let storeConnUserName = res.data.storeConnUserName == null ? "" : res.data.storeConnUserName;
								item.storeConnPhone = storeConnPhone;
								item.storeAddress = storeAddress;
								item.storeConnUserName = storeConnUserName;
								switch(Number(item.workOrderStatus)){
									case 0:
										that.waitingOrder.push(item);
										break;
									case 5:
										that.inProgressOrder.push(item);
										break;
									case 10:
										that.inProgressOrder.push(item);
										break;
									case 20:
										that.inProgressOrder.push(item);
										break;
									case 16:
										that.inProgressOrder.push(item);
										break;
									case 100:
										that.finialOrder.push(item);
										break;
									case 15:
										that.alreadyTransferOrder.push(item);
										break;
									case -1:
										that.bugOrder.push(item);
										break;
								}
							})
						})
					}
					
				});
				}
			},
		},
		onShow(){
			this.current = getApp().globalData.target;
			this.orderType = getApp().globalData.orderType;
			this.fetchData();
		},
		onHide() {
			getApp().globalData.orderType = null;
		},
		onUnload() {
			getApp().globalData.orderType = null;
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: rgb(247,247,247);
		top: 0;
		min-height: 100vh;
		position: absolute;
		width: 100vw;
	}
	.card__head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		&__left {
			font-size: 30rpx;
		}
		&__right {
			border: 1rpx solid #FFA71F;
			color: #FFA71F;
			font-size: 25rpx;
			height: 43rpx;
			width: 250rpx;
			text-align: center;
			line-height: 43rpx;
			border-radius: 10rpx;
		}
	}
	.card__button {
		height: 50rpx;
		width: 200rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		color: #fff;
	}
	.button__pick {
		background-color: #5290ff;
	}
	.button__trans {
		background-color: #FFA71F;
		// margin-bottom: 50rpx;
	}
	.body__top {
		font-size: 25rpx;
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 20rpx;
		white-space: nowrap;
		&__right {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.body__bottom {
		font-size: 25rpx;
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		&__left {
			view {
				margin-bottom: 20rpx;
			}
		}
		&__right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.button__arrival {
			margin-top: 100rpx;
		}
	}
	.card2__head {
		display: flex;
		flex-direction: row;
		&__right {
			border: 1rpx solid #FFA71F;
			color: #FFA71F;
			font-size: 25rpx;
			height: 43rpx;
			width: 250rpx;
			text-align: center;
			line-height: 43rpx;
			border-radius: 10rpx;
			position: absolute;
			right: 68rpx;
		}
		&__icon {
			position: absolute;
			right: 10rpx;
			font-size: 30rpx;
			display: inline-block;
			background-color: black;
			border-radius: 50%;
			height: 42rpx;
			width: 42rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	.uni-tip {
				text-align: center;
	       padding: 15px;
	       width: 300px;
	       background: #fff;
	       box-sizing: border-box;
	       border-radius: 10px;
	   }
		
	   .uni-tip-title {
	       text-align: center;
	       font-weight: bold;
	       font-size: 16px;
	       color: #333;
	   }
		
	   .uni-tip-content {
	       padding: 15px;
	       font-size: 14px;
	       color: #666;
	       /* background: #C8C7CC; */
	       border:2upx solid #ccc;
	       border-radius: 10upx;
	   }
	   
	   .uni-tip-group-button {
	       margin-top: 10px;
	       display: flex;
	   }
	   .uni-tip-group-button>button{
	       font-size:30upx;
	       height: 60upx;
	       line-height: 60upx;
	       text-align: center;
	   }
</style>


